<template>
    <div class="mb16">
        <a-alert class="error mb16" v-if="errors.length" type="error" showIcon :message="`保存基本信息时发生错误：`">
            <template #description>
                <ul>
                    <li v-for="(v, k) in errors" :key="k">{{ v }}</li>
                </ul>
            </template>
        </a-alert>
        <a-alert class="mb16" v-else type="info" showIcon message="填写提示">
            <template #description>
                <ol>
                </ol>
            </template>
        </a-alert>
        <div class="mb16">
            <a-form class="paper-container" :model="model" id="basic-info-form">
                <div class="page-div narrow">
                    <a-alert show-icon id="alert" message="可以修改内容" type="success" v-if="model.canEdit"/>
                    <a-alert show-icon id="alert" message="不能修改内容" type="warning" v-else />
                    <!-- <h3 class="page-title">
                        项目基本信息管理
                    </h3> -->
                    <div class="table-infomation">
                        <span class="date-info">申请日期：{{ model.CreateOn }}</span>
                    </div>
                    <table class="main-table">
                        <colgroup>
                            <col style="width: 100px;">
                            <col style="width: 200px;">
                            <col style="width: 100px;">
                            <col style="width: 200px;">
                        </colgroup>
                        <!-- 项目基本信息 开始 -->
                        <tr>
                            <td>项目名称</td>
                            <td colspan="3">
                                <a-form-item name="ProjectName">
                                    <a-input :readonly="model.readonly" :bordered="false" :maxlength="150" show-count v-model:value="model.ProjectName" />
                                </a-form-item>
                            </td>
                        </tr>
                        <tr>
                            <td>所属学科</td>
                            <td colspan="3">
                                <a-form-item name="Speciality">
                                    <a-input :readonly="model.readonly" :bordered="false" :maxlength="70" show-count v-model:value="model.Speciality" />
                                </a-form-item>
                            </td>
                        </tr>
                        <tr>
                            <td>负责人</td>
                            <td>
                                {{ model.ProjOwner }} / {{ model.ProjOwnerCode }}
                            </td>
                            <td>指导老师</td>
                            <td>
                                {{ model.GuideTeacher }} / {{ model.GuideTeacherCode }}
                            </td>
                        </tr>
                        <tr>
                            <td>项目状态</td>
                            <td>
                                <a-form-item name="Status">
                                    <dict-select :readonly="model.readonly" :bordered="false" dict="申请表状态" prefix="" v-model:value="model.Status" :remove="-1" />
                                </a-form-item>
                            </td>
                            <td>项目类型</td>
                            <td>
                                <a-form-item name="ProjectType">
                                    <dict-select :readonly="model.readonly" :bordered="false" dict="项目类型" prefix="" v-model:value="model.ProjectType" :remove="['']" />
                                </a-form-item>
                            </td>
                        </tr>
                        <tr>
                            <td>申请年度</td>
                            <td>
                                <a-form-item name="ApplyYear">
                                    <year-select :readonly="model.readonly" :bordered="false" prefix="" v-model:value="model.ApplyYear" :remove="['']" />
                                </a-form-item>
                            </td>
                            <td>批次</td>
                            <td>
                                <a-form-item name="Batch">
                                    <batch-select :readonly="model.readonly" :bordered="false" prefix="" v-model:value="model.Batch" :remove="['']" />
                                </a-form-item>
                            </td>
                        </tr>
                        <tr>
                            <td>负责学院</td>
                            <td>
                                <a-form-item name="DepartId">
                                    <depart-select :readonly="model.readonly" :bordered="false" prefix="" schema="学院" v-model:value="model.DepartId" :disableEmpty="true" width="235px" />
                                </a-form-item>
                            </td>
                            <td>所属学院</td>
                            <td>
                                <a-form-item name="BelongDepartId">
                                    <depart-select :readonly="model.readonly" :bordered="false" prefix="" schema="学院" v-model:value="model.BelongDepartId" disableEmpty width="235px" />
                                </a-form-item>
                            </td>
                        </tr>
                        <tr>
                            <td>项目评级</td>
                            <td>
                                <a-form-item name="ProjectLevel">
                                    <dict-select :readonly="model.readonly" :bordered="false" dict="项目级别" prefix="" v-model:value="model.ProjectLevel" :remove="-1" />
                                </a-form-item>
                            </td>
                            <td>所属学院</td>
                            <td>
                                <a-form-item name="ProjectCode">
                                    <a-input :readonly="model.readonly" :bordered="false" v-model:value="model.ProjectCode" />
                                </a-form-item>
                            </td>
                        </tr>
                        <tr>
                            <td>申请金额</td>
                            <td>
                                ￥{{ model.ApplyAmount }}
                            </td>
                            <td>批复金额</td>
                            <td>
                                <a-form-item name="ApprovalAmount">
                                    <a-input-number :readonly="model.readonly" :bordered="false" v-model:value="model.ApprovalAmount" prefix="￥" />
                                </a-form-item>
                            </td>
                        </tr>
                    </table>
                    <a-space class="submit-btn-area" v-if="model.canEdit">
                        <a-button type="primary" class="mr5"><SaveOutlined /> 保存</a-button>
                        <a-button @click="cache.toEditPage(model.ID, false, false)">修改申报书</a-button>
                    </a-space>
                </div>
            </a-form>
        </div>
        <a-flex justify="space-between">
            <a-space>
                <a-button type="primary" @click="save" :loading><SaveOutlined />保存基本信息</a-button>
                <a-button @click="reset" :loading ><ReloadOutlined />还原所有修改</a-button>
            </a-space>
            <a-button type="primary" :loading>
                保存并前往下一页
                <ArrowRightOutlined />
            </a-button>
        </a-flex>
    </div>
    <a-flex justify="space-between">
        <a-space>
            <a-button type="primary" @click="save" :loading><SaveOutlined />保存基本信息</a-button>
            <a-button @click="reset" :loading ><ReloadOutlined />还原所有修改</a-button>
        </a-space>
        <a-button type="primary" :loading>
            保存并前往下一页
            <ArrowRightOutlined />
        </a-button>
    </a-flex>
</template>

<script setup>
import { ref, inject, watchEffect} from 'vue'
import app from "@/app.ts";
import { axios } from '@/axios';
import { cache, useEmptyBasicInfo } from '@proj/ProjectCache'

const errors = ref([]);
const data = inject("data");
const loading = ref(false);
const props = defineProps({ data: Object });
const model = useEmptyBasicInfo();
watchEffect(() => {
    Object.assign(model, data.basicInfo);
});

function reset () {}
async function save () {}
</script>

<style lang="less" scoped>
@import "@/assets/less/paper/paper.less";
ol {
    list-style: decimal;
}
</style>